<template>

  <div >
    
    <div class="box">
        <img src="./../../assets/logo.png" style="width:80%; height:40%">
        </div>    
        <div class="inner">
            <span class="mc-ui-geometry-char" style="height: 20px; width: 100px; position: absolute; left: 40%; top: 18%; color: rgb(193, 23, 23);font-size: 90%;">{{ msg }} </span>

            <span class="ccolor" style="height: 10px; width: 100px; position: absolute; left: 20%; top: 25%;font-size: 90%; color: rgb(193, 23, 23);">产  品  ID: </span>
            <span class="mc-ui-geometry-char" style="height: 25px; width: 100px; position: absolute; left: 50%; top: 25.3%;font-size: 90%;background-color: lightcyan;">{{ id }}</span>

            <span class="mc-ui-geometry-char" style="height: 10px; width: 100px; position: absolute; left: 20%; top: 30%;font-size: 90%;color: rgb(193, 23, 23);">产品名称: </span>
            <span class="mc-ui-geometry-char" style="height: 25px; width: 100px; position: absolute; left: 50%; top: 30%;font-size: 90%;background-color: lightcyan;">  {{ name }}</span>

            <span class="mc-ui-geometry-char" style="height: 10px; width: 100px; position: absolute; left: 20%; top: 35%;font-size: 90%;color: rgb(193, 23, 23);">食品种类: </span>
            <span class="mc-ui-geometry-char" style="height: 25px; width: 100px; position: absolute; left: 50%; top: 35%;font-size: 90%;background-color: lightcyan;">  {{ project }}</span>

            <span class="mc-ui-geometry-char" style="height: 10px; width: 100px; position: absolute; left: 20%; top: 40%;font-size: 90%;color: rgb(193, 23, 23);">录入人员: </span>
            <span class="mc-ui-geometry-char" style="height: 25px; width: 100px; position: absolute; left: 50%; top: 40%;font-size: 90%;background-color: lightcyan;">  {{ creator }}</span>

            <span class="mc-ui-geometry-char" style="height: 10px; width: 130px; position: absolute; left: 14%; top: 45%;font-size: 90%;color: rgb(193, 23, 23);">产品原产地:  </span>
            <span class="mc-ui-geometry-char" style="height: 25px; width: 100px; position: absolute; left: 50%; top: 45%;font-size: 90%;background-color: lightcyan;">  {{ location }}</span>
        
            <span class="mc-ui-geometry-char" style="height: 10px; width: 100px; position: absolute; left: 20%; top: 50%;font-size: 90%;color: rgb(193, 23, 23);">录入时间:  </span>
            <span class="mc-ui-geometry-char" style="height: 25px; width: 200px; position: absolute; left: 50%; top: 50.3%;font-size: 90%;background-color: lightcyan;">  {{ time }}</span>

        </div>
    <div>
    </div>
    <div id="magicalDragScene">
	<i class="el-icon-user-solid" style="position: absolute;  color: black; left: 40%; top: 88%;font-size: 80%;">@蓝信科技提供数据查询</i>
    </div>
<!-- 
  <vue-qr :text="downloadData.url" :margin="0" colorDark="#f67b29" colorLight="#fff" :logoSrc="downloadData.icon + '?cache'" :logoScale="0.3" :size="200"></vue-qr> -->

</div>
</template>

<script>

import axios from 'axios'
import vueQr from 'vue-qr'

var searchURL = window.location.search
searchURL = searchURL.substring(1, searchURL.length);  
var targetPageId = searchURL.split("&")[0].split("=")[1];
const host = '10.78.34.207:8082'
// const host = '192.168.2.106:8080'
export default {
  name: 'get',
   components: {
        vueQr
    },
  data () {
    return {
      msg: '查询结果',
      id : null,
      name: null,
      location: null,
      creator: null,
      time: null,
      project:null,
      downloadData: 
      {
        url: 'https://github.com/lx719679895',
        icon: require("./../../assets/logo.png"),
      },
        }
  },
    methods: {
     getData() {
      var routerParams = this.$route.query.uid
      const url = `http://${host}/v1/trace/get?uid=${routerParams}`;
      console.log('[Airport getData] url', url);
      console.log('searchURL', searchURL);
      axios.get(url).then((res)=>{
              this.id = res.data.data.ID
              this.name = res.data.data.Name
              this.location = res.data.data.Location
              this.creator = res.data.data.Creator
              this.time = res.data.data.Time
              this.project = res.data.data.Project
              console.log(3333333,res)
      });
    },
  
  },
  mounted(){
    this.getData()
    const that = this
    // window.onresize = () => {
    //     return (() => {
    //         window.screenWidth = document.body.clientWidth
    //         that.screenWidth = window.screenWidth
    //     })()
    // let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    //         let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    //         let l = w / 2 - this.$refs.wh.offsetWidth / 2;
    //         let t = h / 2 - this.$refs.wh.offsetHeight / 2;
    //         this.$refs.wh.style.left = l + "px"
    //         this.$refs.wh.style.top = t + "px"
    }
  
}
</script>

<style>
#get {
  /* font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #08111a;
  flex-direction: row;
  justify-content: center;
  margin-top: 60px; */
   display: flex;
      flex-direction:row ;
      align-items: center;/*如果flex-direction：row；代表垂直居中 ；如果flex-direction：column；则代表水平居中*/
      justify-content: center;/*如果flex-direction：row；代表水平居中；如果flex-direction：column；则代表垂直居中*/
      width: 500px;
      height: 500px; 
}

.ccolor{
          background: #fff;
      }
.inner{
    /* position: absolute; */
    /* background-color: darkcyan; */
   
    width: 500px;
    height: 200px;
    top: 20%;
    left: 40%;
    margin-top: -100px;
    margin-left: -150px;
    font-size: 130%;
}
 .box-g{
	position: relative;
	width: 50%;
	height: 630px;
}
  .box-g img {
	position:absolute;
	top: 50%;
	transform: translate(50%, -50%);
}
.ltag{
    position: fixed;
    padding-bottom: 111px;;
    width: 500px;
    height: 50px;
}

h1, h2 {
  font-weight: normal;
  color: #42b983;  
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

</style>
